import { ArrowLeftOutlined } from '@ant-design/icons';
import { history } from '@@/core/history';
import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProDescriptions, {
  ProDescriptionsProps,
} from '@ant-design/pro-descriptions';
import { useRequest } from '@@/plugin-request/request';
import { getItem } from '@/services/aqchain-antd/item';
import { IRouteComponentProps } from 'umi';
import ProCard from '@ant-design/pro-card';
import { Space } from 'antd';
import moment from 'moment';

const DetailDescriptions: React.FC<IRouteComponentProps> = (
  props: IRouteComponentProps,
) => {
  const {
    match: {
      params: { fileHash },
    },
  } = props;

  const { data, loading } = useRequest(() => {
    return getItem({ fileHash });
  });

  const descriptionProps: ProDescriptionsProps = {
    column: 1,
    bordered: true,
  };

  return (
    <PageContainer
      header={{
        backIcon: <ArrowLeftOutlined />,
        onBack: () => history.goBack(),
        title: data?.name,
        breadcrumb: {},
      }}
      loading={loading}
    >
      <ProCard>
        <Space direction="vertical">
          <ProDescriptions
            {...descriptionProps}
            title="作品详情"
            dataSource={data}
            columns={[
              {
                title: '作品名称',
                dataIndex: 'name',
              },
              {
                title: '作品简介',
                dataIndex: 'description',
              },
              {
                title: '作品类型',
                dataIndex: 'category',
                valueType: 'select',
                valueEnum: {
                  1: '文字作品',
                  2: '图片作品',
                  3: '视频作品',
                },
              },
            ]}
          />
          <ProDescriptions
            {...descriptionProps}
            title="区块详情"
            dataSource={data?.fileStorage}
            columns={[
              {
                title: 'TokenID',
                dataIndex: 'tokenID',
              },
              {
                title: '交易哈希',
                dataIndex: 'txHash',
              },
              {
                title: '区块高度',
                dataIndex: 'blockNumber',
              },
              {
                title: '区块时间',
                render: (_, record) => {
                  return moment
                    .unix(record.block.time)
                    .format('YYYY-MM-DD HH:mm:ss');
                },
              },
            ]}
          />
          <ProDescriptions
            {...descriptionProps}
            title="文件详情"
            dataSource={data}
            columns={[
              {
                title: '文件名称',
                dataIndex: 'fileName',
              },
              {
                title: '文件大小',
                dataIndex: 'fileSize',
              },
              {
                title: '文件类型',
                dataIndex: 'fileType',
              },
              {
                title: '文件哈希',
                dataIndex: 'fileHash',
              },
            ]}
          />
          <ProDescriptions
            {...descriptionProps}
            title="创建者"
            dataSource={data?.creator}
            columns={[
              {
                title: '账户',
                dataIndex: 'address',
              },
              {
                title: '用户名',
                dataIndex: 'username',
              },
            ]}
          />
          <ProDescriptions
            {...descriptionProps}
            title="拥有者"
            dataSource={data?.owner}
            columns={[
              {
                title: '账户',
                dataIndex: 'address',
              },
              {
                title: '用户名',
                dataIndex: 'username',
              },
            ]}
          />
        </Space>
      </ProCard>
    </PageContainer>
  );
};

export default DetailDescriptions;
